import './alarmInformation.less'
import { post } from '../../axios/index'
import { useState, useEffect } from 'react'

function AlarmInformation(props) {
    const [warnArr, setWarnArr] = useState([])
    useEffect(() => {
        let timer = null
        function getData(){
            post('/ck_electrical/api/getWarningInfo', {facilityIds: []}).then(res => {
                if(res.data.status === '200') {
                    setWarnArr(arr => {
                        let newArr = [...res.data.data, ...arr]
                        if(newArr.length > 100){
                            newArr = newArr.slice(0, 100)
                        }
                        return newArr
                    })
                    timer = setTimeout(() => {
                        getData()
                    }, 10000)
                }
            })
        }
        getData()
        return () => {
            if(timer) {
                clearTimeout(timer)
            }
        }
    }, [])

    return <div className={`alarm-information ${props.className}`}>
        <div className='title'>报警信息</div>
        <div className='cont'>
            {
                warnArr.map((item, index) => {
                    return <p key={index}>{item}</p>
                })
            }
        </div>
    </div>
}

export default AlarmInformation